<template>
	<!--      订单信息-->
	<view class="order-box" :style="{ '--price': vuex_config.price, '--color': vuex_config.themeColor1 }">
		<view class="ob-title">订单信息</view>
		<view class="ob_cell">
			<view class="ob-cell-name">商品总计</view>
			<view class="ob-cell-value"></view>
			<view class="ob-cell-price">￥{{ $price(prodPrice) }}</view>
		</view>
		<view class="ob_cell">
			<view class="ob-cell-name">订单编号</view>
			<view class="ob-cell-value">{{ orderInfo.order_no }}</view>
			<view class="ob-cell-price" @click="copyInfo">复制</view>
		</view>
		<view class="ob_cell" v-if="orderInfo.coupon_price > 0">
			<view class="ob-cell-name">优惠券</view>
			<view class="ob-cell-value"></view>
			<view class="ob-cell-price">￥{{ orderInfo.coupon_price }}</view>
		</view>
		<view class="ob_cell" v-if="service_charge > 0">
			<view class="ob-cell-name">服务费</view>
			<view class="ob-cell-value"></view>
			<view class="ob-cell-price">￥{{ service_charge }}</view>
		</view>
		<view class="ob_cell" v-if="orderInfo.postage > 0">
			<view class="ob-cell-name">运费</view>
			<view class="ob-cell-value"></view>
			<view class="ob-cell-price">￥{{ $price(orderInfo.postage) }}</view>
		</view>
		<view class="ob_cell" v-if="orderInfo.type == 8">
			<view class="ob-cell-name">积分</view>
			<view class="ob-cell-value"></view>
			<view class="ob-cell-price">{{ orderInfo.detailed[0].integration * orderInfo.detailed[0].num }}</view>
		</view>
		<view class="ob_cell">
			<view class="ob-cell-name">实付金额</view>
			<view class="ob-cell-value"></view>
			<view class="ob-cell-price">￥{{ $price(orderInfo.total_amount) }}</view>
		</view>
		<!-- 酒店入住时间 -->
		<view class="ob_cell" v-if="orderInfo.type == 3 && orderInfo.moveTime">
			<view class="ob-cell-name">入住时间</view>
			<view class="ob-cell-value">{{ orderInfo.moveTime | formTime }}</view>
		</view>
		<view class="ob_cell">
			<view class="ob-cell-name">下单时间</view>
			<view class="ob-cell-value"></view>
			<view class="" >{{ orderInfo.date_creation | formTime }}</view>
		</view>
		<view class="ob_cell">
			<view class="ob-cell-name">支付方式</view>
			<view class="ob-cell-value"></view>
			<view class="" >{{ orderInfo.total_amount ==0?'无需支付': payTypeObj[orderInfo.pay_type]}}</view>
		</view>
		<view class="ob_cell" v-if="orderInfo.remark">
			<view class="ob-cell-name">订单备注</view>
			<view class="ob-cell-value"></view>
			<view class="">{{orderInfo.remark }}</view>
		</view>
	</view>
</template>

<script>
import { uniCopy } from '../../../../utils/uniPromise';
import { formatDate } from '@/utils/moment/index.js';
import {toNumber} from "../../../../utils/transform";
export default {
	data() {
		return {
			payTypeObj:{
				0:'未支付',
				1:'微信支付',
				2:'余额支付',
				3:'线下支付',
				4:'微信支付',
				5: '支付宝支付',
			}
		};
	},
	props: {
		orderInfo: {
			type: Object,
			default: () => {
				return {};
			}
		},
		service_charge:{
			type:Number,
			default:0
		},// 服务费
	},
	computed: {
		prodPrice() {
			//商品金额
			if (!this.orderInfo.detailed) return 0;
			return this.orderInfo.detailed.reduce((sum, item) => {
				return sum + toNumber(item.num) * toNumber(item.price);
			}, 0);
		}
	},
	mounted() {
	
	},
	filters: {
		formTime(time) {
			return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
		}
	},
	methods: {
		// 复制收货人信息
		copyInfo(type = 'order_no') {
			let info = `${this.orderInfo.order_no}`;
			uniCopy(info).then(() => {
				this.$toast('复制成功');
			});
		}
	}
};
</script>

<style scoped lang="scss">
/* 订单信息 */
.order-box {
	width: 100%;
	margin-top: 10rpx;
	.ob-title {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		padding-left: 20rpx;
		position: relative;
		font-size: 32rpx;
		&::before {
			content: '';
			position: absolute;
			width: 6rpx;
			height: 32rpx;
			background-color: var(--color);
			border-radius: 3rpx;
			top: 50%;
			left: 0;
			transform: translate(0, -50%);
		}
	}
	.ob_cell {
		width: 100%;
		display: flex;
		padding: 10rpx 0;
		box-sizing: content-box;
		line-height: 40rpx;
		&:last-child{
			padding-bottom: 20rpx;
		}
		.ob-cell-name {
			font-size: 28rpx;
			width: 180rpx;
			color: #666666;
		}
		.ob-cell-value{
			font-size: 28rpx;
			flex: 1;
			overflow: hidden;
			color: #000;
		}
		.ob-cell-price {
			font-size: 30rpx;
			text-align: right;
			color: var(--price);
			margin-left: 16rpx;
		}
	}
}
</style>
